<template>
<!-- 导航头 -->
<div class="nav-header-wrapper">
    <div class="nav-header">
        <!-- 缩展图标 -->
        <div class="navicon">
            <a @click="collapsedChange"><i :class="iconClass"></i></a>
        </div>
        <!-- 导航 -->
        <div class="navitem">
            <!-- 二级菜单 -->
            <div class="navrouter" v-if="showNav">
                <Menu mode="horizontal" theme="light" :active-name="activeNav" @on-select="goto" >
                    <MenuItem :name="item.url" v-for="(item,index) in navList"  :key="index"   >
                        {{item.name}}
                    </MenuItem>
                </Menu>
            </div>
            <!-- 一级菜单 -->
            <span v-else>{{activeMenu.name}}</span>
        </div>
    </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import util from 'util'
import {ZLST_WEB_LOCATION} from '@/api/service/config.js'
import getData          from 'getData'

export default {
    props: {
        userInfo: {
            type: Object
        }
    },

    components: {

    },

    computed: {
        ...mapGetters(['collapsed', 'activeMenu']),

        iconClass() {
            if (!this.collapsed) return 'zlstbd-icon-main-collection';
            else return 'zlstbd-icon-main-expansion';
        }
    },

    data(){
        return {
            showNav:false,
            navList:[],
            activeNav:'',
            warningCount: 1,
            warningList: [],
        }
    },

    watch:{
        $route(val) {
            this.$nextTick(() => {
                this.activeNav = val.path;
            })
        },
        activeMenu(val) {
            if (val.hasChild) {
                this.showNav = true;
                this.$set(this, 'navList', val.children);
            } else {
                this.showNav = false;
            }
        },

    },

    mounted() {

    },

    methods: {
        //路由跳转
        goto(url){
            this.$router.push({
                path: url
            });
        },
        //缩展左侧菜单
        collapsedChange() {
            this.$store.commit('setCollapsed', !this.collapsed);
        },
        //返回
        returnLastRoute() {
            this.$router.go(-1);
        },
        //查看用户详细信息
        toUserDetail() {

        },
        //修改密码
        toResetPassword() {
            this.$refs.userPoptip.cancel();
            this.$refs.resetPw.show();
        },
        //登出
        logout() {
            this.$refs.userPoptip.cancel();
            this.$Modal.confirm({
                title: '退出',
                content: '确定退出系统？',
                onOk: ()=> {
                    getData.get('logout').then(res => {
                        if (res.status == 200 && res.data.code == '000') {
                            window.location.href = ZLST_WEB_LOCATION.LOGIN_URL;
                        }
                    })
                }
            })
        },
    }
}
</script>

<style lang="less">
.nav-header-wrapper {
    position: relative;
    margin: 12px 10px 12px 2px;
    font-size: 16px;

    .nav-header{
        position: relative;
        margin-left: 0;
        margin-right: 0;
        height: auto;
        zoom: 1;
        display: block;
        .navitem {
            position: absolute;
            top: 0;
            left: 48px;
        }
        .navrouter{
            position: absolute;
            top: -15px;
            left: -16px;
            .ivu-menu .ivu-menu-item {
                font-size: 14px;
            }
            .ivu-menu-horizontal.ivu-menu-light:after {
                background: none;
            }
            // .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,
            // .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,
            // .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,
            // .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover{
            //     color: #3a3a3a;
            //     border-bottom: 2px solid #2d8cf0;
            // }
        }
        // .ivu-tabs-nav .ivu-tabs-tab {
        //     padding: 6px 16px 20px 16px;
        // }
        .nav-head{
            width: 22px ;
            display: block;
        }
        .navitem{
            width: calc(~ '100vh - 22px');
            .ivu-tabs-bar{
                border-bottom: none;
                margin-bottom: 0px;
            }
            .ivu-tabs-ink-bar{
                bottom: 2px;
            }
        }

    }
    .user-info-header {
        position: absolute;
        right: 0;
        top: 0;
    }
    .navicon {
        i {
            vertical-align: middle;
            font-size: 16px;
        }
    }
    .warning-badge{
        width: 36px;
        height: 36px;
        padding-top: 2px;
        background: #eee;
        border-radius: 100%;
        text-align: center;
        display: inline-block;
    }
    .user-name {
        width: 100px;
    }
    .ivu-poptip-body {
        padding: 8px 0;
    }
    .user-poptip:hover {
        .user-nav {
            border-bottom: 3px solid #224792;
        }
    }
    .user-info {
        position: relative;
        padding-left: 56px;
        padding-bottom: 16px;
        margin: 5px 10px 0;
        cursor: pointer;
        border-bottom: 1px solid #dcdee2;
        .user-icon {
            position: absolute;
            left: 10px;
            top: 5px;
            width: 36px;
            height: 36px;
            background: #eee;
            border-radius: 100%;
            text-align: center;
            i {
                font-size: 24px;
                padding-top: 5px;
            }
        }
    }
    .warning-empty {
        height: 100px;
        text-align: center;
        padding: 30px 15px 0;
    }
    .user-nav {
        text-align: center;
        width: 96px;
        padding-bottom: 13px;
        cursor: pointer;
    }
    .user-nav:hover {
        border-bottom: 2px solid #224792;
    }
    .warning-list {
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
